import React, { useState, useEffect } from 'react'
import { history } from 'umi'
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { Card, Row, Col, Pagination, Button, Modal, Form, Input, InputNumber, message } from 'antd';
import { FormOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import styles from './index.less'

const { confirm } = Modal

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
};

export default (props: any) => {

    const { location } = props
    const [modalVisbale, setModalVisable] = useState(false)
    const [form] = Form.useForm()

    const [albumList, setAlbumList] = useState({ list: [], total: 0 })
    const [current, setCurrent] = useState(location?.state?.current ?? 1)
    const [albumId, setAlbumId] = useState(0)

    const Album = (props: any) => {
        const { item } = props;
        return (
            <div className={styles.album}>
                <div className={styles.albumBody}>
                    <img src={item.logo || "http://stm.niuteam.cn/upload/goods/2020031910415400988.jpg"} alt="" />
                    <div className={styles.albumTool}>
                        <Button size="small" style={{ marginRight: "4px" }} onClick={() => {
                            setAlbumId(item.id)
                            setModalVisable(true)
                            request(`/goods/album/${item.id}`).then((result) => {
                                const data = result.data
                                form.setFieldsValue(data)
                            })
                        }}><FormOutlined /></Button>
                        <Button size="small" onClick={() => {
                            destroy([item.id])
                        }}><DeleteOutlined /></Button>
                    </div>
                </div>
                <div className={styles.albumFoot}>
                    <div style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => {
                        history.push(`/goods/album/picture/${item.id}`, { current })
                    }}>{item.title}</div>
                    <div style={{ color: "rgba(0, 0, 0, 0.45)" }}>共{item.pic_num}张</div>
                </div>
            </div>
        );
    }


    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/album-destroy`, {
                    method: "Delete",
                    params: { ids },
                }).then((result) => {
                    message.success("删除成功")
                    getList({
                        page: current,
                        pageSize: 16
                    })
                })
            }
        });
    }

    const ToolBtn = () => {
        return (
            <div>
                <Button type="primary" ghost style={{ marginRight: "6px" }}>上传图片</Button>
                <Button danger onClick={() => {
                    setModalVisable(true)
                }}>新建相册</Button>
            </div>
        );
    }

    const getList = (params = {}) => {
        request(`/goods/album-list`, { params }).then((result) => {
            const { list, total } = result.data
            setAlbumList({ list, total })
        })
    }

    useEffect(() => {
        getList({
            current: current,
            pageSize: 16
        })
    }, [])

    const onFinish = (values: any) => {
        request(`/goods/album/${albumId}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message)
            getList({
                current: current,
                pageSize: 16
            })
            setModalVisable(false)
        })
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBtn />}>
                <div style={{ padding: "20px 0" }}>
                    <Row gutter={16}>
                        {
                            albumList.list.map((item: any, inx: number) => {
                                return (<Col span={3} key={inx} style={{ paddingTop: "10px" }}>
                                    <Album item={item} />
                                </Col>)
                            })
                        }

                    </Row>
                </div>
                <Modal
                    title={albumId > 0 ? "修改相册" : "添加相册"}
                    visible={modalVisbale}
                    onOk={() => {
                        form.submit()
                    }}
                    onCancel={() => {
                        setModalVisable(false)
                    }}
                    getContainer={false}
                >
                    <Form
                        {...layout}
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item label="相册名称" name="title">
                            <Input />
                        </Form.Item>
                        <Form.Item label="排序" name="sort">
                            <InputNumber />
                        </Form.Item>
                    </Form>
                </Modal>

                <Pagination defaultPageSize={16} current={current} total={albumList.total} onChange={(page, pageSize) => {
                    setCurrent(page)
                    getList({
                        current: page,
                        pageSize,
                    })
                }} />
            </Card>
        </PageHeaderWrapper >
    );
}